<template>
  <el-dialog
      title="添加/修改设备"
      :visible.sync="visible"
      :id.sync="id"
      @opened="openDialog"
      :before-close="closeDialog"
      width="480px">
    <el-form label-width="80px">
      <el-form-item label="设备名称" prop="device.deviceName" size="small">
        <el-input size="small" v-model="device.deviceName"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="device.deviceCode" size="small">
        <el-input size="small" v-model="device.deviceCode"></el-input>
      </el-form-item>
      <el-form-item label="位置编码" prop="device.locationCoding" size="small">
        <el-input size="small" v-model="device.locationCoding"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="device.deviceType" size="small">
        <el-select v-model="device.deviceType">
          <el-option
              v-for="item in deviceType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接入方式" prop="device.accessMode" size="small">
        <el-select v-model="device.accessMode">
          <el-option
              v-for="item in accessMode"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="健康状况" prop="device.health" size="small">
        <el-select size="small" v-model="device.health">
          <el-option
              v-for="item in health"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用状态" prop="device.runtimeStatus" size="small">
        <el-select size="small" v-model="device.runtimeStatus">
          <el-option
              v-for="item in runtimeStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item align="center" style="margin-left: -80px;">
        <el-button type="primary" size="small" plain @click="handleUpdate" v-if="id!=''">修改设备</el-button>
        <el-button type="primary" size="small" plain @click="onSubmit" v-else>添加设备</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {getDeviceById, updateDevice, createDevice} from "@/api/device";

export default {
  name: 'DeviceEditDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      deviceType: [
        {id: 1, name: '灯光'},
        {id: 2, name: '电源'},
        {id: 3, name: 'USB'},
        {id: 4, name: '人体传感器'},
        {id: 5, name: '其他'}
      ],
      accessMode: [
        {id: 1, name: 'Home Assistant'},
        {id: 2, name: 'MQTT'}
      ],
      runtimeStatus:[
        {id: 1, name: '空闲'},
        {id: 2, name: '使用中'},
        {id: 3, name: '关闭'},
        {id: 4, name: '故障'},
      ],
      health:[
        {id: 1, name: '健康'},
        {id: 2, name: '故障'},
      ],
      device: {}
    }
  },
  methods: {

    // 添加设备信息
    onSubmit() {
      createDevice({
        'accessMode': this.device.accessMode,
        'createTime': this.device.createTime,
        'deviceCode': this.device.deviceCode,
        'deviceName': this.device.deviceName,
        'deviceType': this.device.deviceType,
        'entityId': this.device.entityId,
        'health': this.device.health,
        'id': this.device.id,
        'ip': this.device.ip,
        'locationCoding': this.device.locationCoding,
        'runtimeStatus': this.device.runtimeStatus,
        'username': this.device.username,
      }).then((response) => {
        if (response.data.code === 200) {
          this.$parent.fetchData()
          this.$alert('提交成功', '提示', {
            confirmButtonText: '确定'
          })

        } else {
          this.$alert('提交失败', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
      this.$emit('update:visible', false)

    },

    // 更新设备信息
    handleUpdate() {
      updateDevice({
        'accessMode': this.device.accessMode,
        'createTime': this.device.createTime,
        'deviceCode': this.device.deviceCode,
        'deviceName': this.device.deviceName,
        'deviceType': this.device.deviceType,
        'entityId': this.device.entityId,
        'health': this.device.health,
        'id': this.device.id,
        'ip': this.device.ip,
        'locationCoding': this.device.locationCoding,
        'runtimeStatus': this.device.runtimeStatus,
        'username': this.device.username,
      }).then((response) => {
        if (response.data.code === 200) {
          this.$parent.fetchData()
          this.$alert('提交成功', '提示', {
            confirmButtonText: '确定'
          })

        } else {
          this.$alert('提交失败', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
      this.$emit('update:visible', false)

    },

    // 打开对话框
    openDialog() {
      if (this.id !== '') {
        getDeviceById(this.id).then((response) => {
          this.device = response.data.data;
        })
      }
    },

    // 关闭对话框
    closeDialog() {
      this.device = {}
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>

</style>
